<template>
  <div class="container pt-4">
    <p class="tip_top">
      每项最多上传5张
    </p>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <template  v-for="(item, index) in UploadList">
			<div class="lbl_ipt">{{ item.label }}</div>
			<template v-for="(d,dIdx) in (item.value.length+1>5?5:item.value.length+1)">
				<van-field v-model="item.desc[dIdx]" placeholder="请输入对应图片的文字说明"  maxlength="30" show-word-limit>
					<template #left-icon>
						<van-uploader :before-read="useCompressor" :after-read="(file) => uploadFile(file, index,dIdx)" :max-count="1" v-model="item.value[dIdx]"/> 
					</template>
				</van-field>
			</template>
    	</template>
      </van-cell-group>
      <div class="flex w-1/2 mx-auto my-4">
        <van-button
          round
          block
          type="primary"
          style="margin-right: 16px"
          @click="router.go(-1)"
        >
          上一步
        </van-button>
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          :loading="loading"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { useCompressor } from "@/utils";
import { add, upload } from "@/api";
import { useUserInfo } from "@/store";
import { showToast } from "vant";
const router = useRouter();
const UploadList = ref([
  {
	id:'1',
    label: "工作风采(个人工作中的照片)",
    value: [],
	desc:[],
	url:[]
  },{
	id:'2',
    label: "荣誉证书(工作或生活中获得的证书)",
	value: [],
	desc:[],
	url:[]
  },{
	id:'3',
    label: "精彩生活(生活中的精彩瞬间)",
	value: [],
	desc:[],
	url:[]
  },
  {
	id:'4',
    label: "作品分享(个人工作中的文艺作品)",
	value: [],
	desc:[],
	url:[]
  },
]);
const { setUserInfo } = useUserInfo();

const uploadFile = async (file,index,dIdx)=>{
	const url = await upload({ file:file.file });
	UploadList.value[index].url[dIdx]=url;
}

const loading = ref(false);
// 工作风采
let workStyle = [];
let workStyleDesc = [];
// 荣誉证书
let certificateOfHonor = [];
let certificateOfHonorDesc = [];
// 精彩生活
let lifeMoment = [];
let lifeMomentDesc = [];
// 作品分享
let workSharing = [];
let workSharingDesc = [];
const onSubmit = async () => {
	if (loading.value) return;
	loading.value = true;
	const {  userInfo: { fileList = [], zoneId, ...req },   options, } = useUserInfo();
	console.log(zoneId,'req')
	const idPhoto = [];
	const photoList = [];
	
	try {
		for (let p of fileList) {
			const data = await upload({ file: p.file });
			idPhoto.push(data);
		}
		for (let p of UploadList.value) {
			if (p.id === '1'){
				workStyle = p.url;
				workStyleDesc = p.desc;
			}else if(p.id === '2') {
				certificateOfHonor = p.url;
				certificateOfHonorDesc = p.desc;
			} else if(p.id === '3') {
				lifeMoment = p.url;
				lifeMomentDesc = p.desc;
			}  else if(p.id === '4') {
				workSharing = p.url;
				workSharingDesc = p.desc;
			}
		}
	} catch {
		loading.value = false;
		return;
	}
	add({
		...req,
		zoneId,
		// zoneId: options.find((item) => item.text === zoneId)?.id,
		idPhoto: idPhoto.join(","),
		// photoList: photoList.join(","),
		workStyle: workStyle.join(','),
		lifeMoment: lifeMoment.join(','),
		certificateOfHonor: certificateOfHonor.join(','),
		workSharing: workSharing.join(','),
		workStyleDesc,
		lifeMomentDesc,
		certificateOfHonorDesc,
		workSharingDesc
	}).then(() => {
      showToast("操作成功");
      router.push("/result");
      loading.value = false;
    }).catch(() => {
      loading.value = false;
    });
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f9f9f9;
  height: 100%;
  padding: 15px;
  .tip_top{
	color: red; font-size: 14px; padding: 10px 0;
  }
  :deep(.van-form){
	padding-bottom: 30px;
	.van-cell-group{

		padding: 0;
		margin: 0;
		.lbl_ipt{
			padding: 10px 10px 0;
		}
		.van-cell{
			padding: 10px;
		}
	}
  }
}
</style>
